<template>
  <el-tabs type="border-card">
    <el-tab-pane label="积分活动">
      <div class="bigBox">
        <template v-for="item in list" key="item.at_id">
          <div class="contBox">
            <div class="boxTop">
              <div class="imgBox">
                <img :src="item.at_imgSrc" />
              </div>
              <div class="textBox">
                {{ item.at_name }}
                <p class="tz">{{ item.at_desc }}</p>
                <p>积分：{{ item.at_jifen }}</p>
              </div>
              <div>
                <el-button text @click="openDialog(item)">设置</el-button>
                <el-dialog v-model="dialogVisible" title="设置" width="30%" :before-close="handleClose">
                  <span>每日打卡赠送积分</span><input type="text" v-model="sheJf" />
                  <template #footer>
                    <span class="dialog-footer">
                      <el-button @click="dialogVisible = false">取消</el-button>
                      <el-button type="primary" @click="xiuJ()">确认
                      </el-button>
                    </span>
                  </template>
                </el-dialog>
              </div>
            </div>

            <div class="boxBtm">
              <div>
                今日<span>{{ item.at_today }}</span>/ 累计 <span>{{ item.at_count }}</span>
              </div>
              <template>
                <el-switch v-model="item.Zuangtai" :active-value="1" :inactive-value="0" inline-prompt active-text="开"
                  inactive-text="关"></el-switch>
              </template>
            </div>
          </div>
        </template>
      </div>
    </el-tab-pane>
    <el-tab-pane label="积分统计">
      <el-table :data="nowData" border style="width: 100%">
        <el-table-column prop="grade" label="排名" width="180" />
        <el-table-column prop="userName" label="姓名" width="180" />
        <el-table-column prop="phone" label="手机号" width="180" />
        <el-table-column prop="jiFen" label="积分" width="180" />
        <el-table-column prop="state" label="商城用户" width="180" />
        <el-table-column prop="address" label="活动参与情况" />
      </el-table>
      <el-pagination background layout="prev, pager, next" :page-count="pageMax" @current-change="changePage"
        style="margin-left: 40%; margin-top: 1rem" />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { reactive, ref, onMounted, toRefs, computed } from "vue";

import { ElMessageBox, ElMessage } from "element-plus";
import http from "../utils/request";
export default {
  setup() {
    let data = reactive({
      beforeChange1: false,
      dialogVisible: false,
      sheJf: "",
      at_id: "",
      list: "",
      nowPage: 1,
      nowData: computed(() => {
        let start = (data.nowPage - 1) * 3;
        return data.tableData.slice(start, start + 3);
      }),
      pageMax: computed(() => {
        return Math.ceil(data.tableData.length / 3);
      }),
      a: (val) => { },
      tableData: [
        {
          date: "2016-05-03",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
      ],
      changePage(page) {
        data.nowPage = page;
      },
      handleClose: () => {
        ElMessageBox.confirm("确认关闭吗？")
          .then(() => {
            done();
          })
          .catch(() => {
            // catch error
          });
      },
      handleClose: () => {
        ElMessageBox.confirm("确认关闭吗？")
          .then(() => {
            done();
          })
          .catch(() => {
            // catch error
          });
      },
      openDialog(item) {
        data.dialogVisible = true;
        // console.log(item);
        data.at_id = item.at_id;
      },
      xiugai: (row) => {
        console.log(row);
      },
      xiuJ: () => {
        data.dialogVisible = false;
        // console.log(data1.at_id);
        http({
          url: "/setJiFen",
          method: "GET",
          params: {
            id: data.at_id,
            jifen: data.sheJf,
          },
        }).then((res) => {
          //   console.log(res);
          if (res.data.code == 200) {
            ElMessage({
              message: "设置成功",
              type: "success",
              duration: 1000,
            });
            data.sheJf = "";
            data.getAllData();
          }
        });
      },
      getAllData: () => {
        http({
          url: "/getMarkGI",
          method: "GET",
        }).then((res) => {
          // console.log(data);
          data.list = res.data.data;
        });
      },
      getAllMenmber() {
        http({
          url: "/Allmember",
          method: "GET",
        }).then((res) => {
          // console.log(res);

          res.data.data.map((item) => {
            if (item.state == 1) {
              item.state = "是";
            } else {
              item.state = "否";
            }
          });
          data.tableData = res.data.data;
        });
      },
    });
    onMounted(() => {
      data.getAllData();
      data.getAllMenmber();
    });
    return { ...toRefs(data) };
  },
};
</script>

<style lang="less">
.bigBox {
  width: 90%;
  margin: 0 auto;
}

.contBox {
  width: 28%;
  height: 25%;
  background-color: rgb(254, 254, 254);
  display: inline-block;
  margin-right: 5%;
  margin-top: 5%;
  padding-bottom: 1%;
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.boxTop {
  display: flex;
  justify-content: space-between;
  margin: 5% 5% 0 5%;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

.imgBox {
  width: 80px;
  height: 80px;

  img {
    width: 80px;
    height: 80px;
  }
}

.textBox {
  display: inline-block;
}

.boxBtm {
  display: flex;
  justify-content: space-between;
  margin: 7% 5% 0 5%;
}

.tz {
  color: rgb(165, 165, 165);
  margin-top: 0px;
  font-size: 12px;
}
</style>